<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('水质日趋势图')" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.staticfile.org/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 75px">监测点名称:</label>
                            <select name="monitorId" id="monitorId" >
                            </select>
                        </li>
                        <li>
                            <label>查询时间：</label>
                            <input type="text" placeholder="请选择查询时间" class="time-input" name="produceTime" id="produceTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()" ><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="dayTrend" style="height: 600px;width: 100%;"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script type="text/javascript" th:inline="javascript">
    var property=["化学需氧量","氨氮","总磷","总氮","PH","电导","溶氧","浊度","温度"];
    var xAxis;
    var data;
    $(function(){
        loadDepartmentName();
        queryRptChart();
    });
    // $(document).ready(function(){
    //     queryRptChart();
    // });
    function loadDepartmentName() {
        $.ajax({
            url: "/bus/monitor/list",
            type: "post",
            success: function (data) {
                var nameOpt = "<option value='' selected='selected'>--请选择--</option>";
                for (var i = 0; i < data.rows.length; i++) {
                    nameOpt+="<option value='"+data.rows[i].monitorId+"' >"+data.rows[i].monitorName+"</option>"
                    $('#monitorId').html(nameOpt);
                    document.getElementsByTagName("tr[0]")
                }
            }
        });
    };

    function searchData() {
        var body = {"monitorId":$("#monitorId").val(),"produceTime":$("#produceTime").val()};
        var myChart = echarts.init(document.getElementById('dayTrend'));
        $.ajax({
            url : "xAxis",
            type: "post",
            dataType:"json",
            async: false,
            data:JSON.stringify(body),
            success : function(result) {
                if(result){
                    xAxis=result;
                }
            }
        });
        $.ajax({
            url : "data",
            type:"post",
            dataType:"json",
            data:JSON.stringify(body),
            headers: {'Content-Type': 'application/json'},
            success : function(result) {
                if(result){
                    data=result;
                    var option = {
                        title : {
                            text: '因子数据趋势图',
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            property
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : xAxis
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value}'
                                }
                            }
                        ],
                        series : data
                    };
                    myChart.setOption(option,true);
                }
            }
        });
    }

    function queryRptChart(){
        $.ajax({
            url : "xAxis",
            type: "post",
            dataType:"json",
            async: false,
            data:JSON.stringify({"monitorId":"","produceTime":""}),
            success : function(result) {
                if(result){
                    xAxis=result;
                }
            }
        });
        $.ajax({
            url : "data",
            type:"post",
            dataType:"json",
            data:JSON.stringify({"monitorId":"","produceTime":""}),
            headers: {'Content-Type': 'application/json'},
            success : function(result) {
                if(result){
                    data=result;
                    var option = {
                        title : {
                            text: '因子数据趋势图',
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            property
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : xAxis
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value}'
                                }
                            }
                        ],
                        series : data
                    };
                    myChart.setOption(option);
                }
            }
        });
        var myChart = echarts.init(document.getElementById('dayTrend'));
    }
</script>

</body>
</html>